<template>
	<view class="">

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				
					<view class="top">


						<view class="">
							<u-tabs :list="info.list" :current="current" lineColor="#000000" @change="oncurrent"
								:inactiveStyle="{color:'#666',fontSize:'28rpx'}"
								:activeStyle="{color:'#222222',fontSize:'28rpx'}"></u-tabs>
						</view>
					</view>


					<view class="tabs xflex-x-around xpb24">
						<view class="tabsItem xflex-x" v-for="(item,index) in detail.typelist" :key="index">
							<view class="tabsItemname" @click="onTypeActive(index)"
								:class="detail.typeActive == index +1?'tabsItemnameActive':''">
								{{item.name}}
							</view>
					
						</view>
					
					
					
					</view>

			</template>



			<view class="goodslist">
				<view class="goodslistItem"  @click="topage(item)" v-for="(item,index) in dataList" :key="index">
					<image class="goodslistItemimg" :src="item.design_image" mode=""></image>
					<view class="goodslistItemname xml32 xpb10">
						{{item.name}}
					</view>
				</view>
			</view>


		</z-paging>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';

	import searchs from '@/components/search/searchs.vue'
	import {
		forEach
	} from 'lodash';

	let list1 = ref([{
		name: '全部',
	}, {
		name: '汇总图',
	}, {
		name: '900*1800*9'
	}])
	let current = ref(0)


	import {
		summarycategory,
		summarylists,
		accesstypec
	} from '../../network/home.js'

	let list = ref([])
	let detail = reactive({
		id: '',
		title: "",
		tablist: [],
		active: 0,
	
		twoTypeList: [],
		twoTypeActive: 0,
	
		typelist: [],
		typeActive: 0
	})
	
	const oncurrent = async (e) => {
		current.value = e.index
		paging.value.reload()
	
	}
	
	accesstypec().then(res => {
		console.log(res);
	
		detail.typelist = res.data
	})
	
	const onTypeActive = (index) => {
		detail.typeActive = index
	
		paging.value.reload()
	}
	


	const topage = (data) => {
		uni.navigateTo({
			url: '/pages/index/goodsDetail?id=' + data.id
		})
	}
	let info = reactive({
		id: '',
		list: []
	})


	const paging = ref(null)
	const dataList = ref([])

	const queryList = (pageNo, pageSize) => {
		summarylists({
			page_no:pageNo,
			page_size:pageSize,
			id:info.list[current.value].id,
			typec_id: detail.typelist.length > 0 && detail.typeActive != 0 ? detail.typelist[detail.typeActive]
				.id : 0,
			
		}).then(res => {
			paging.value.complete(res.data.lists);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	onLoad((option) => {
		info.id = option.id

		getTabList()
	})


	const getTabList = () => {
		summarycategory().then(res => {
			info.list =res.data

			info.list.forEach((item, index) => {
				if (item.id == info.id) {
					current.value = index
				}
				
			})
			
			setTimeout(()=>{paging.value.reload()})



		})

	}




	const click = (e) => {

	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.top {
		background-color: #fff;
	}

	.searchbox {
		padding: 22rpx 30rpx 30rpx;
	}

	.box {
		padding: 30rpx;
	}


	.class {
		padding: 30rpx;
		display: flex;


	}

	.classItem {

		background: #EEEEEE;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;


	}

	.classactive {
		background: #000000;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.goodslist {
		padding: 31rpx;
		box-sizing: border-box;
		display: grid;
		gap: 20rpx 20rpx;

		grid-template-columns: repeat(2, 1fr);


	}

	.goodslistItem {
		width: 335rpx;
		height: 748rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.goodslistItemimg {
		width: 100%;
		height: 660rpx;
		background: #333;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.goodslistItemname {
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
		margin-top: 23rpx;
	}

	.tabs {
		margin-top: 34rpx;
	}

	.tabsItem {
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}

	.tabsItemicon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}
</style>